Home Explore Help
Register Sign In
jamesperet
/
velvet-design
Watch 1
Star 0
Fork 0

Browse Source
velvet front page layout

jamesperet 9 years ago
parent
695767eb81
commit
6366414cb3
4 changed files with 87 additions and 34 deletions
Show Diff Stats
  1. 25 1
      app/assets/javascripts/start.js
  2. 20 0
      app/assets/stylesheets/start.css.less
  3. 10 9
      app/views/layouts/velvet_layout.html.erb
  4. 32 24
      app/views/start/index.html.erb

+ 25 - 1
app/assets/javascripts/start.js
View File 

@@ -45,5 +45,29 @@ $( document ).ready(function() {
45 45
46 46 
 	});
47 47
48 
+	// scroll to 'header'
49 
+	$("#btn-logo").click(function() {
50 
+	    event.preventDefault();
51 
+	    $('html, body').animate({
52 
+	        scrollTop: $("#myCarousel").offset().top
53 
+	    }, 1000);
54 
+	});
55 
+
56 
+	// scroll to 'sobre'
57 
+	$("#btn-sobre").click(function() {
58 
+	    event.preventDefault();
59 
+	    $('html, body').animate({
60 
+	        scrollTop: ($("#sobre").offset().top - 150)
61 
+	    }, 1000);
62 
+	});
63 
+
64 
+	// scroll to 'post'
65 
+	$("#btn-post").click(function() {
66 
+	    event.preventDefault();
67 
+	    $('html, body').animate({
68 
+	        scrollTop: ($("#post").offset().top - 50)
69 
+	    }, 1000);
70 
+	});
71 
+
72 
+});
48 73
49 
-});

+ 20 - 0
app/assets/stylesheets/start.css.less
View File 

@@ -155,3 +155,23 @@ min-width: 200px;
155 155 
 max-width: 400px;
156 156 
 padding: 40px;
157 157 
 }
158 
+
159 
+#map {
160 
+	height: 500px;
161 
+}
162 
+
163 
+footer.velvet {
164 
+	margin-top: -30px;
165 
+	height: 150px;
166 
+	background-color: #202020;
167 
+}
168 
+
169 
+p.footer {
170 
+	margin-top: 30px;
171 
+	text-align: center;
172 
+	color: white;
173 
+}
174 
+
175 
+p.footer a {
176 
+	color: white;
177 
+}

+ 10 - 9
app/views/layouts/velvet_layout.html.erb
View File 

@@ -35,6 +35,9 @@
35 35 
     <%= favicon_link_tag 'favicon.ico', :rel => 'shortcut icon' %>
36 36
37 37 
     <%= javascript_include_tag "application" %>
38 
+
39 
+    <script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js'></script>
40 
+    <link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.css' rel='stylesheet' />
38 41 
   </head>
39 42 
   <body>
40 43 
 
@@ -46,14 +49,16 @@
46 49 
             <span class="icon-bar"></span>
47 50 
             <span class="icon-bar"></span>
48 51 
           </a>
49 
-          <%= image_tag "logotipo_velvet.png", class: 'brand', style: 'width: 250px;' %>
52 
+          <a id="btn-logo" href="#myCarousel"><%= image_tag "logotipo_velvet.png", class: 'brand', style: 'width: 250px;' %></a>
50 53
51 54 
 		<div class="container nav-collapse ">
52 55 
 		  <ul class="nav pull-right">
53 
-		    <li><%= link_to "Blog", blog_path  %></li>
54 
-		    <li ><%= link_to (t 'contact.contact'), contact_messages_path  %></li>
55 
-			<% if current_user.admin %>
56 
-				<li><%= link_to ('<i class="fa fa-cogs"></i>').html_safe, admin_dashboard_path %></li>
56 
+		    <li><a id="btn-sobre" href="#sobre">Sobre</a></li>
57 
+		    <li><a id="btn-post" href="#post">Notícias</a></li>
58 
+	   		<% if user_signed_in? %>
59 
+				<% if current_user.admin %>
60 
+					<li><%= link_to ('<i class="fa fa-cogs"></i>').html_safe, admin_dashboard_path %></li>
61 
+				<% end %>
57 62 
 			<% end %>
58 63 
 			<% if user_signed_in? %>
59 64 
 	 			<li><%= link_to ('<i class="fa fa-user"></i>').html_safe, edit_user_registration_path %></li>
 
@@ -76,11 +81,7 @@
76 81 
             <%= bootstrap_flash %>
77 82 
             <%= yield %>
78 83
79 
-	<div class="container">
80 
-	      <%= render 'layouts/footer' %>
81 
-	</div>
82 84
83 
-    </div> <!-- /container -->
84 85
85 86 
   </body>
86 87 
 </html>

+ 32 - 24
app/views/start/index.html.erb
View File 

@@ -1,12 +1,6 @@
1 1 
 <!-- Carousel
2 2 
 ================================================== -->
3 3 
 <div id="myCarousel" class="carousel slide" data-ride="carousel" style="height: 400px">
4 
- <!-- Indicators -->
5 
-	 <ol class="carousel-indicators">
6 
-	   <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
7 
-	   <li data-target="#myCarousel" data-slide-to="1" class=""></li>
8 
-	   <li data-target="#myCarousel" data-slide-to="2" class=""></li>
9 
-	 </ol>
10 4 
 	 <div class="carousel-inner" role="listbox">
11 5 
 	   <div class="item active">
12 6 
 	     <%= image_tag "header.jpg", style: 'width: 100%;' %>
 
@@ -27,7 +21,7 @@
27 21 
 	  </div>
28 22 
 </div><!-- /.carousel -->
29 23
30 
-<div class="container" style="margin-top: 30px;">
24 
+<div id="sobre" class="container" style="margin-top: 30px;">
31 25 
 	<div class="row">
32 26
33 27 
 		<div class="span12">
 
@@ -82,25 +76,39 @@
82 76 
 		</div>
83 77 
 	</div>
84 78 
 </div>
79 
+<div class="clearfix"></div>
80 
+<div >
81 
+	<footer class="velvet">
82 
+	  <hr>
83 
+
84 
+	<div class="container nav-collapse">
85 85
86 
-<div id="about2" class="container">
87 
-	<div class="row" style="margin-top: 80px;">
88 
-		<div class="span12">
89 
-
90 
-			<p class="lead lead-big">Compreendendo o design de uma maneira ampla, a Velvet Design se posiciona como uma agência de criação, comunicação e realização de ideias.</p>
91 
-
92 
-			<p class="lead">Para nós o design é um princípio que pode se desdobrar em diversas formas e escalas  - da esfera gráfica à ambiental passando pelo objeto - além de contemplar, também, o desenho do processo que envolve desde a concepção até a realização dos projetos formulados.</p>
93 
-
94 
-			<p class="lead">Nessa direção, a Velvet Design Conectivo assegura aos seus clientes a execução integral dos projetos que desenvolve – operacionalizando todas as etapas de produção - otimizando recursos e garantindo que o produto final seja concluído do modo como fora inicialmente imaginado.</p>
95 
-		</div>
96 
-
86 
+
97 87 
 	</div>
98 
-</div>
99 
-
100 
-<div class="container" style="backgroun-color: white;">
101 
-	<footer style="margin-top: 100px; height: 80px;">
102 
-	  <hr>
103 
-	  <p style="text-align: center;">&copy; <%= @config.website_name %> <%= Time.now.year %></p>
88 
+	<div class="container">
89 
+		<div class="row">
90 
+			<div class="span12">
91 
+				<p class="footer">
92 
+		    		 	<a id="btn-sobre" href="#sobre">Sobre</a> |
93 
+		   		  	<a id="btn-post" href="#post">Notícias</a> |
94 
+			   		<% if user_signed_in? %>
95 
+						<% if current_user.admin %>
96 
+			   				<%= link_to 'Painel de Controle', admin_dashboard_path %> |
97 
+						<% end %>
98 
+			   		<% end %>
99 
+			   		<% if user_signed_in? %>
100 
+			    			<%= link_to 'Conta', edit_user_registration_path %> |
101 
+			    			<%= link_to 'Sair', destroy_user_session_path, method: :delete %>
102 
+			   		<% else %>
103 
+			   			<%= link_to 'Entra', new_user_session_path  %> |
104 
+			   			<%= link_to (t "nav.signup"), new_user_registration_path  %>
105 
+			   		<% end %>
106 
+				</p>
107 
+				<hr style="margin-top: 20px;">
108 
+				<p style="text-align: center; color: white">&copy; <%= @config.website_name %> <%= Time.now.year %></p>
109 
+			  </div>
110 
+		  </div>
111 
+	  </div>
104 112 
 	</footer>
105 113 
 </div>
106 114